const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
// js压缩
const TerserWebpackPlugin = require('terser-webpack-plugin');
// 分离css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    // 1. entry
    entry: './src/main.js', // 单入口
    output: {
        // 路径
        path: path.resolve(__dirname, '../dist'),
        // 文件名
        filename: './static/js/[name]_[hash:10].js',
        // 每次清除dist目录中的文件重新生成
        clean: true
    },
    // 3. mode 模式
    mode: 'production',
    // 4. module, 可以通过loader处理其他资源
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                                ],
                            },
                        },
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                                ],
                            },
                        },
                    },
                    'less-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 如果大小超过8KB，就会以文件的形式展现，如果小于8M那么会变成base64的URL
                generator: {
                    // 配置图片资源生成的路径及文件名
                    filename: 'static/images/[hash]_[name][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        // 指定转化base64URL的临界值
                        maxSize: 8 * 1024 // 4kb
                    }
                }
            },
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    // 配置图片资源生成的路径及文件名
                    filename: 'static/font/[hash:8]_[name][ext]'
                },
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    // 5. plugin
    plugins: [
        new HtmlWebpackPlugin({
            // 配置html的模板文件
            template: path.resolve(__dirname, '../src/index.html'),
            // 输出文件名==》 dist/下生成的html文件的文件名
            filename: "index.html", // localhost:3000/index.html
            // 决定main.js自动插入的位置
            inject: "body"
        }),
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
        new CssMinimizerPlugin()
    ],

    optimization: {
        minimize: true,//使用压缩功能
        minimizer: [new TerserWebpackPlugin()],//配置js压缩
        // 代码分割配置
        splitChunks: {
            chunks: "all", // 对所有模块都进行分割
            cacheGroups: {
                default: {
                    // 其他没有写的配置会使用上面的默认值
                    minSize: 0, // 我们定义的文件体积太小了，所以要改打包的最小文件体积
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
            },
        },
    },
    devtool:"source-map"
}